<template>
  <div v-if="model" style="padding: 0 20px;margin-bottom: 10px;">
    <div v-if="model.combinator" class="group" :class="{ invalid: !model.children || model.children.length === 0 }">
      <div class="combinator">
        <el-select v-model="model.combinator" style="width: 30px;" :class="{ 'green': model.combinator === 'and' }">
          <el-option label="且" value="and" />
          <el-option label="或" value="or" />
        </el-select>
      </div>
      
      <BuilderItem v-for="(item, index) in model.children" :index="item.id" :model="item" :fields="fields" :remove="() => removeGroup(index)" />

      <div class="footer">
        <el-button type="primary" link @click="addCondition">
          添加条件
        </el-button>
        <el-button type="primary" link @click="addGroup">
          添加分组
        </el-button>
        <el-button v-if="remove" type="danger" link @click="remove">
          删除分组
        </el-button>
      </div>
    </div>
    <div v-else>
      <div class="condition-item">
        <el-form :model="model" inline>
          <el-form-item prop="id">
            <el-select v-model="model.id" @change="onFieldChange" :class="{ invalid: model.id === undefined }" style="width: 150px">
              <el-option
                v-for="field in fields"
                :key="field.id"
                :label="field.field_label"
                :value="field.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item prop="operator">
            <el-select v-model="model.operator" :class="{ invalid: model.operator === undefined }" style="width: 130px;margin-left: 10px;" @change="onOperatorChange">
              <el-option 
                v-for="option in fieldOptions"
                :key="option.value"
                :label="option.text"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item prop="value">
            <!-- <template v-if="model.field === 'input' && currentField"> -->
            <template v-if="model.field === 'input'">
              <template v-if="['one_of'].includes(model.operator)">
                <el-input-tag v-model="model.value" :placeholder="model.placeholder" :class="{ invalid: model.value.length === 0 }" style="width: 200px;margin-left: 10px;">
                  <template v-if="model.pre_append_text" #prefix>
                    {{ model.pre_append_text }}
                  </template>
                  <template v-if="model.end_append_text" #suffix>
                    {{ model.end_append_text }}
                  </template>
                </el-input-tag>
              </template>
              <template v-else-if="['empty', 'not_empty'].includes(model.operator)">
                <el-input v-model="model.value" :placeholder="model.placeholder" style="width: 200px;margin-left: 10px;">
                  <template v-if="model.pre_append_text" #prefix>
                    {{ model.pre_append_text }}
                  </template>
                  <template v-if="model.end_append_text" #suffix>
                    {{ model.end_append_text }}
                  </template>
                </el-input>
              </template>
              <el-input v-else v-model="model.value" :class="{ invalid: model.value === undefined }" style="width: 200px;margin-left: 10px;">
                <template v-if="model.pre_append_text" #prefix>
                  {{ model.pre_append_text }}
                </template>
                <template v-if="model.end_append_text" #suffix>
                  {{ model.end_append_text }}
                </template>
              </el-input>
            </template>

            <template v-else-if="model.field === 'select'">
              <el-select v-if="currentField" v-model="model.value" :multiple="['one_of'].includes(model.operator)" :placeholder="model.placeholder" :class="{ invalid: ['one_of'].includes(model.operator) ? model.value.length === 0 : !model.value }" style="width: 200px;margin-left: 10px;">
                <template v-if="model.pre_append_text" #prefix>
                  {{ model.pre_append_text }}
                </template>
                <el-option 
                  v-for="option in currentField['extra_config'].options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </template>

            <template v-else-if="model.field === 'number'">
              <template v-if="['between', 'not_between'].includes(model.operator)">
                <el-input-number v-model="model.value[0]" :max="model.value[1] - 1" :controls="false" :placeholder="model.placeholder" :class="{ invalid: model.value[0] === undefined }" style="width: 200px;margin-left: 10px;">
                  <template v-if="model.pre_append_text" #prefix>
                    {{ model.pre_append_text }}
                  </template>
                  <template v-if="model.end_append_text" #suffix>
                    {{ model.end_append_text }}
                  </template>
                </el-input-number>
                <span style="width: 20px;text-align: center;">-</span>
                <el-input-number v-model="model.value[1]" :min="model.value[0] + 1" :controls="false" :placeholder="model.placeholder" :class="{ invalid: model.value[1] === undefined }" style="width: 200px;">
                  <template v-if="model.pre_append_text" #prefix>
                    {{ model.pre_append_text }}
                  </template>
                  <template v-if="model.end_append_text" #suffix>
                    {{ model.end_append_text }}
                  </template>
                </el-input-number>
              </template>
              <el-input-number v-else v-model="model.value" :controls="false" :placeholder="model.placeholder" :class="{ invalid: model.value === undefined }" style="width: 200px;margin-left: 10px;">
                <template v-if="model.pre_append_text" #prefix>
                  {{ model.pre_append_text }}
                </template>
                <template v-if="model.end_append_text" #suffix>
                  {{ model.end_append_text }}
                </template>
              </el-input-number>
            </template>

            <template v-else-if="model.field === 'textarea'">
              <el-input v-model="model.value" type="textarea" :placeholder="model.placeholder" :class="{ invalid: ['empty', 'not_empty'].includes(model.operator) ? false : model.value === undefined }" style="width: 200px;margin-left: 10px;" />
            </template>

            <template v-else-if="model.field === 'date'">
              <div v-if="['between', 'not_between'].includes(model.operator)" :class="{ invalid: !model.value || model.value.length === 0 }" style="margin-left: 10px;">
                <el-date-picker 
                  v-model="model.value"
                  type="daterange"
                  value-format="YYYY-MM-DD"
                  :clearable="false"
                  :start-placeholder="model.placeholder"
                  :end-placeholder="model.placeholder"
                  style="width: 240px;"
                />
              </div>
              <div v-else :class="{ invalid: !model.value }" style="margin-left: 10px;">
                <el-date-picker 
                  v-model="model.value"
                  type="date"
                  value-format="YYYY-MM-DD"
                  :clearable="false"
                  :placeholder="model.placeholder"
                  style="width: 200px;"
                />
              </div>
            </template>

            <template v-else-if="model.field === 'datetime'">
              <div v-if="['between', 'not_between'].includes(model.operator)" :class="{ invalid: !model.value || model.value.length === 0 }" style="margin-left: 10px;">
                <el-date-picker
                  v-model="model.value"
                  type="datetimerange"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :clearable="false"
                  :start-placeholder="model.placeholder"
                  :end-placeholder="model.placeholder"
                  style="width: 380px;"
                />
              </div>
              <div v-else :class="{ invalid: !model.value }" style="margin-left: 10px;">
                <el-date-picker
                  v-model="model.value"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :clearable="false"
                  :placeholder="model.placeholder"
                  style="width: 200px;"
                />
              </div>
            </template>

            <template v-else-if="model.field === 'time'">
              <div v-if="['between', 'not_between'].includes(model.operator)" :class="{ invalid: !model.value || model.value.length === 0 }" style="margin-left: 10px;">
                <el-time-picker
                  is-range
                  v-model="model.value"
                  :clearable="false"
                  :start-placeholder="model.placeholder"
                  :end-placeholder="model.placeholder"
                  style="width: 200px;"
                />
              </div>
              <div v-else :class="{ invalid: !model.value }" style="margin-left: 10px;">
                <el-time-picker
                  v-model="model.value"
                  :clearable="false"
                  :placeholder="model.placeholder"
                  style="width: 200px;"
                />
              </div>
            </template>
          </el-form-item>
        
          <el-form-item style="margin-left: 10px;">
            <el-button type="danger" link @click="removeCondition">
              X
            </el-button>
          </el-form-item>
          
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ConditionBuilderItem",
  props: {
    model: Object,
    fields: Array,
    remove: Function
  },
  data() {
    return {
      options: [
        {"text":"等于","value":"equal"},
        {"text":"等于其中之一","value":"one_of"},
        {"text":"不等于","value":"not_equal"},
        {"text":"大于","value":"greater_than"},
        {"text":"大于等于","value":"greater_than_equal"},
        {"text":"小于","value":"less_than"},
        {"text":"小于等于","value":"less_than_equal"},
        {"text":"属于范围","value":"between"},
        {"text":"不属于范围","value":"not_between"},
        {"text":"为空","value":"empty"},
        {"text":"不为空","value":"not_empty"},
        {"text":"包含","value":"contains"},
        {"text":"不包含","value":"not_contain"},
        {"text":"开头包含","value":"start_contain"},
        {"text":"开头不包含","value":"start_not_contain"},
        {"text":"结尾包含","value":"end_contain"},
        {"text":"结尾不包含","value":"end_not_contain"},
      ],
      currentField: null,
      fieldOptions: [],
      childBuilderRefs: []
    }
  },
  mounted() {
    if (this.model?.field && this.fields?.length) {
      const field = this.fields.find((item) => item.id === this.model.id)
      this.currentField = field
      this.fieldOptions = this.options.filter((option) => this.currentField['supported_operator'].includes(option.value))
    }
  },
  methods: {
    addCondition() {
      this.model.children.push({})
    },
    removeCondition() {
      if (this.remove) this.remove()
    },
    addGroup() {
      this.model.children.push({
        id: Date.now(),
        combinator: 'and',
        children: []
      })
    },
    removeGroup(index) {
      this.model.children.splice(index, 1)
    },
    onFieldChange(val) {
      const field = this.fields?.find((item) => item.id === val)
      this.currentField = field
      this.fieldOptions = this.options.filter((option) => this.currentField['supported_operator'].includes(option.value))
      this.model.field = field.field_component
      this.model.field_label = field.field_label
      this.model.field_key = field.field_key
      this.model.operator = undefined
      this.model.value = undefined
      this.model.placeholder = field.placeholder
      this.model.pre_append_text = field.pre_append_text
      this.model.end_append_text = field.end_append_text
    },
    onOperatorChange(val) {
      if (['between', 'not_between', 'one_of'].includes(val)) {
        this.model.field_value = []
      } else {
        this.model.field_value = undefined
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .group {
    position: relative;
    margin: 10px 0 10px 0;
    padding: 15px 20px 10px 20px;
    border: 1px solid gray;
    position: relative;
    border-radius: 5px;

    & > .combinator {
      position: absolute;
      margin-top: -12px;
      top: 50%;
      left: -21px;
      display: flex;
      flex-direction: row;
      & > * {
        margin: 0 5px;
      }
    }
    & > .footer {
      padding:  0 20px;
    }

    .condition-item {
      white-space: nowrap;
    }
  }

  .invalid {
    &.group {
      border: 1px solid var(--el-color-danger);
    }
    :deep(.el-select__wrapper) {
      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }
    :deep(.el-textarea__inner) {
      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }
  }

  .combinator {
    :deep(.el-select) {
      .el-select__wrapper {
        padding: 0;
        text-align: center;
        min-height: 24px;
        background-color: var(--el-color-primary);
      }
      .el-select__placeholder {
        color: #fff;
      }
      &:hover {
        .el-select__wrapper {
          background-color: var(--el-color-primary-light-3);
        }
      }
    }
    .green {
      :deep(.el-select__wrapper) {
        background-color: var(--el-color-success);
      }
    }
    :deep(.el-select__suffix) {
      display: none;
    }
  }

  :deep(.el-form--inline) {
    .el-form-item {
      margin-bottom: 0;
      margin-right: 0;
      &__error {
        display: none;
      }
    }
  }
 
  :deep(.el-textarea) {
    vertical-align: middle;
  }
</style>
